<template>
  <div class="app-albumlist-item">
    <div class="app-list-col">
      <img
        :src="fullUrl(album.coverImage)"
        :alt="album.title"
      >
    </div>
    <div class="app-list-col-full">
      <p>
        <i class="material-icons">album</i>
        <router-link
          class="album title"
          :to="{name: 'LibraryAlbum', params: { albumId: album.id }}"
        >
          {{ album.title }}
        </router-link>
        <span
          v-if="album.publishDate"
          class="album publish-date"
        >发行日期：{{ album.publishDate }}</span>
        <span
          v-if="album.recordLabel"
          class="album record-label"
        >厂牌：{{ album.recordLabel }}</span>
        </router-link>
      </p>
      <Table
        class="app-songs-table"
        :columns="columns"
        :data="album.hasSongs"
        size="small"
      />
    </div>
  </div>
</template>

<script lang="tsx">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { MarkRequired } from 'ts-essentials'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { TableColumn } from 'view-design'
import { Album, Song, getAlbumById } from '@/api/resources'
import { cdn, formateDurationOfSong } from '@/utils'
import { VNode } from 'vue'

type RequiredAlbum = MarkRequired<Partial<Album>, 'belongsToArtists' | 'hasSongs'>
type RequiredSong = MarkRequired<Partial<Song>, 'id' | 'title' | 'duration' | 'belongsToArtists'>

@Component({
  name: 'AlbumListItem'
})
export default class extends Vue {
  @Prop() albumId!: number;
  private album: Partial<Album> = {};
  private fullUrl = cdn
  private params: CreateQueryParams = {
    join: [
      {
        field: 'hasSongs',
        select: ['id', 'title', 'duration', 'favCount']
      },
      {
        field: 'hasSongs.belongsToArtists',
        select: ['id', 'name']
      }
    ]
  };

  private columns: TableColumn[] = [
    {
      type: 'index',
      width: 60,
      align: 'center'
    },
    {
      title: '歌名',
      key: 'title',
      align: 'center',
      render: (h, p) => {
        return (
          <router-link to={{ name: 'LibrarySong', params: { songId: (p?.row as RequiredSong)?.id } }}>
            {(p?.row as RequiredSong)?.title}
          </router-link>
        )
      }
    },
    {
      title: '歌手',
      key: 'artist',
      align: 'center',
      render: (h, p) => {
        const doms: VNode[] = [];
        (p?.row as RequiredSong).belongsToArtists.forEach((artist) => {
          const v = (
            <router-link to={{ name: 'LibraryArtist', params: { artistId: artist.id } }}>
              {artist.name}
            </router-link>
          )
          doms.push(v)
        })
        return <div>{doms}</div>
      }
    },
    {
      title: '时长',
      key: 'duration',
      align: 'center',
      render: (h, p) => {
        return <span>{formateDurationOfSong((p?.row as RequiredSong)?.duration)}</span>
      }
    },
    {
      title: '喜欢',
      key: 'favCount',
      align: 'center'
    }
  ];

  async created () {
    this.album = (
      await getAlbumById(this.albumId, this.params)
    ).data
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.app-albumlist-item {
  display: flex;
  margin: 40px 0;
  .app-list-col {
    margin-left: 22px;
    margin-right: 28px;
    img {
      display: block;
      width: 140px;
      border-radius: 8px;
    }
  }
  .app-list-col-full {
    flex: 1;
    p {
      display: flex;
      align-items: center;
      i {
        color: @primary-color;
      }
      .album {
        margin-left: 8px;
        font-size: 0.9em;
        color: @text-color-secondary;
        &.title {
          font-size: 1.2em;
          color: @text-color;
        }
      }
    }
  }
}

.app-songs-table {
  &/deep/.ivu-table {
    * {
      background-color: @dark-bg-color;
    }
  }
  &/deep/a {
    &:hover {
      color: @text-color;
    }
    &::after {
      content: ' / ';
    }
    &:last-of-type {
      &::after {
        content: none;
      }
    }
  }
}
</style>
